<template>
	<view class="main">
		<u-navbar title="消息中心" :autoBack="true" :bgColor="theme_color" :titleStyle="{color:'#ffffff'}"
			leftIconColor="#ffffff"></u-navbar>
		<view :style="'margin-top:' + navH + 'px;'" style="position: relative;">
			<view>
				<u-tabs :list="list1" @click="click"></u-tabs>
			</view>
			<!-- <view class="top-tabs">
				<view class="tabs" :class="{btborder:type === index}" v-for="(item,index) in tabsList" :key="index"
					@tap="changeTabs(index)">
					{{item.name}}
				</view>
			</view> -->
			<view style="border-top:1px solid #e2e2e2;margin-top:10px;">
				<u-list>
					<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
						<u-list-item v-for="(item, index) in list" :key="index" >
							<u-cell :title="item.notice_info.title" value="详情" :label="item.notice_info.add_time" @click="showDetail(item)">
							</u-cell>
						</u-list-item>
					</mescroll-body>
				</u-list>
			</view>
		</view>
		<u-modal :show="show" :title="title" @confirm="confirm">
			<view class="slot-content">
				<view>
					<rich-text :nodes="content" style="font-size: 16px;"></rich-text>
				</view>
				<view>{{add_time}}</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		notice_list,
		notice_info
	} from '@/api/user.js';
	import {
		mapState,
		mapGetters
	} from "vuex";
	import {
		BASE_URL
	} from '@/config/app.js'
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				imgHost: BASE_URL,
				list: [],
				list1: [{
					name: '未读',
				}, {
					name: '已读',
				}],
				navH: '',
				is_read: 1, //1未读2已读
				show: false,
				title: '',
				content: '',
				add_time: '',
				tabsList: [{
					key: 0,
					name: '站内消息'
				}, {
					key: 1,
					name: '商家消息'
				}],
				type: 0,
				upOption: {
					textLoading:' ',
					textNoMore: ' ',
					empty: {
						tip: ' ',
						use:false
					}
				},
				upDataMsg:null, //轮询
				theme_color: getApp().globalData.theme_color,
			};
		},
		computed: {
			...mapGetters(['isLogin', 'app_token'])
		},
		onLoad(options) {
			this.navH = getApp().globalData.navHeight / 2;
		},
		onShow() {
			this.changeTabs(this.type)
			this.upDataMsg = setInterval(()=>{
				this.mescroll.resetUpScroll()
			},1000)
		},
		onUnload(){
			console.log('页面卸载');
			if(this.upDataMsg){
				clearInterval(this.upDataMsg);
				this.upDataMsg= null;
			}
		},
		methods: {
			changeTabs(index) {
				this.type = index;
				// if(this.type = 0){
					
				// }else{
					
				// }		
			},
			upCallback(page) {
				var that = this;
				notice_list({
					app_token: that.app_token,
					page: page.num,
					is_read: that.is_read,
				}).then(async (res) => {

					this.mescroll.endSuccess(res.data.length);

					//设置列表数据
					if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(res.data); //追加新数据

				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			click(item) {
				if (item.name == '未读') {
					this.is_read = 1;
				} else {
					this.is_read = 2;
				}
				this.mescroll.resetUpScroll()
			},
			showDetail(item) {
				this.title = '';
				this.content = '';
				this.add_time = '';
				this.show = true;
				this.title = item.notice_info.title;
				this.content = item.notice_info.content;
				this.add_time = item.notice_info.add_time;
				if (item.is_read == 0) {
					notice_info({
						app_token: this.app_token,
						notice_id: item.notice_id
					}).then(res => {
						this.mescroll.resetUpScroll()
					})
				}
			},
			confirm() {
				this.title = '';
				this.content = '';
				this.add_time = '';
				this.show = false;
			}
		},
	}
</script>

<style lang="scss" scoped>
.top-tabs {
		position: fixed;
		width: 100%;
		display: flex;
		align-items: center;
		background-color: #fff;
		font-size: 28rpx;
		border-radius: 8rpx;
		padding: 20rpx 0;
		margin-bottom: 10rpx;
		z-index: 1000;
	}

	.tabs {
		display: flex;
		align-items: center;
		padding: 4rpx 15rpx;
		margin: 0 20rpx;
	}

	.btborder {
		color: #fff;
		background-color: $theme-color;
		border-radius: 30rpx;
	}
</style>
